<template>
	<view class="Organizationalmanagement paddingbottom8">
		<!-- 标签导航 -->
		<view class="flex tabs background-f">
			<view class="flex1 text-center tab-items" v-for="(item, index) in tabs" :key="index"
				:class="{ active: index === actived }" @click="changeActive(index)">
				{{ item }}
				<view :class="{ line: index === actived }"></view>
			</view>
		</view>

		<!-- 搜索框，仅在选项卡激活时显示 -->
		<view class="search" v-if="actived > 0">
			<uni-easyinput suffixIcon="search" v-model="staffName" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
		</view>

		<!-- 列表部分 -->
		<view class="list">
			<z-paging ref="paging" v-model="dataList" @query="queryList" v-if="actived > 0">
				<view v-for="(item, index) in dataList" :key="index"
					class="background-f margin8-16 padding16  borderradius" @click="goOrganizationalreview(item)">
					<view class="items">
						<view class="item-name flex1" style="flex: 0.7;">{{ item.staffName }}</view>
						<view class="item-title flex2">
							<view class="item-phone">{{ item.staffInfo.phone }}</view>
							<view class="item-code">{{maskedIdCard(item.staffInfo.idCard) }}</view>
						</view>
						<!-- 			<view class="flex1 text-end" v-if="actived !== 1">
							<view class="item-operation">{{ item.createTime }}</view>
							<text :class="{ 'item-status': actived === 0, 'item-retain': actived === 2 }">
								{{ getpoliticalStatusOptions(item.status)  }}
							</text>
						</view> -->
								
					<view class="flex1 text-end transferout">
					  <text class="transferout-status">
					    {{ getStatusText(item.status) }}
					  </text>
					</view>

							
					</view>
					<view class="item-codes">
						<view style="display: block">
							申请时间：{{ item.createTime }}
						</view>
						<!-- <view v-if="actived>1" >
							通过时间：{{ item.updateTime }}
						</view> -->
					</view>
				</view>
			</z-paging>
			<!-- 如果没有数据，显示组织员申请码组件 -->
			<organizercode v-else />
		</view>

		<!-- 显示用户信息 -->
		<view v-for="(item, index) in dataInfo" :key="index">
			{{ item }}
		</view>
	</view>
</template>

<script>
	import {
		getDictsList
	} from "../../api/system/dicts";
	import {
		queryOrganizerApprovalRecordsPage
	} from "../../api/work/organizationalmanagement";
	import organizercode from "./organizercode.vue";

	export default {
		components: {
			organizercode,
		},
		data() {
			return {
				actived: 0, // 当前激活的标签索引
				tabs: ["组织员申请码", "待审批", "组织员管理", "审批驳回"], // 标签名称数组
				value: "", // 搜索框的输入值
				dataList: [], // 列表数据
				dataInfo: [], // 用户信息数据
				pageNum: 0, // 当前页码
				pageSize: 10, // 每页显示的条数
				organizerapplynode: null,
				staffName:null,
			};
		},
		onShow() {
			this.getUserInfo(); // 页面显示时获取用户信息
			this.getList(); // 获取列表数据
		},
		created() {
			this.getDictsListData()
		},
		methods: {
			
			/**
			 * 
			 * @param {Object} status
			 */
			  getStatusText(status) {
			      if (status == null) return "工会负责人审批";
			      if (status == 0) return "通过";
			      if (status == 1) return "驳回";
			      return "";
			    },
			// 获取字典数据
			getDictsListData() {
				getDictsList('organizer_apply_node')
					.then(res => {
						this.organizerapplynode = res.data.map(item => ({
							...item,
							text: item.dictLabel,
							value: item.dictValue
						}));
					})
					.catch(err => {
						console.error(err);
					});
			},
			// 
			getpoliticalStatusOptions(item) {
				const matchedItem = this.organizerapplynode.find(item => item.dictValue == item);
				return matchedItem ? matchedItem.text : '未知';
			},
			maskedIdCard(idCard) {
				return idCard ?
					idCard.replace(/^(\d{6})\d+(\d{4})$/, '$1********$2') :
					'';
			},
			// 切换激活的标签
			changeActive(index) {
				this.pageNum = 0; // 重置当前页码为0
				this.actived = index; // 设置当前激活的标签索引
				this.$refs.paging.reload(); // 重新加载列表数据
			},

			// 列表查询方法
			queryList(pageNo, pageSize) {
				this.pageNum = pageNo; // 更新当前页码
				console.log(this.actived);
				const obj = {
					applyStatus: this.actived === 1 ? '0' : this.actived === 2 ? '1' : this.actived === 3 ? '1' : null,
					status: this.actived === 2 ? '0' : this.actived === 3 ? '1' : null,
				};


				this.fetchListData(obj); // 根据当前激活的标签获取列表数据
			},


			goOrganizationalreview(item) {
				console.log(item);
				this.$tab.navigateTo(`/pages/work/organizationalreview?itemId=${item.id}&actived=${this.actived}`);;
			},

			// 抽象化数据获取逻辑
			async fetchListData(applyStatusObj) {
				const pageDomain = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					// pageNum: 0,
					// pageSize: 10,
				};

				try {
					const res = await queryOrganizerApprovalRecordsPage({
						pageDomain,
						...applyStatusObj
					});
					console.log(res.data.records);
					this.dataList = res.data.records; // 更新列表数据
					// this.$refs.paging.complete(true); // 通知分页组件完成加载
				} catch (err) {
					console.error(err); // 输出错误日志
					// this.$refs.paging.complete(false); // 通知分页组件加载失败
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	// .zp-paging-container{
	// 	width: 100vw;
	// 	height: 100vh;
	// }


	.Organizationalmanagement {
		width: 100vw;
		height: 100vh;


		.tabs {
			font-weight: 500;
			height: 88rpx;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
		}

		.tab-items {
			height: 100%;
		}

		.active {
			color: rgb(189, 26, 45);
		}

		.line {
			border: 2px solid rgb(189, 26, 45);
			width: 10px;
			border-radius: 3px;
			margin: 10rpx auto;
			background-color: rgb(189, 26, 45);
		}

		.search {
			padding: 0 32rpx;

			::v-deep .is-input-border {
				border-radius: 20px;
				background-color: rgb(189, 26, 45) !important;
				border: 1px solid rgb(189, 26, 45) !important;
			}

			::v-deep .uni-easyinput__content-input {
				border-radius: 17px;
				background-color: #fff !important;
			}

			::v-deep .uniui-search {
				color: #fff !important;
			}
		}

		.list {
			width: 100%;
			height: 100%;

			.z-paging-content-fixed,
			.zp-loading-fixed {
				position: absolute !important;
				top: 200rpx !important;
			}

			.item-codes {
				font-size: 22rpx;
				color: rgba(102, 102, 102, 1);
				margin-top: 15rpx;
				// display: flex;
				// justify-content: space-between;
			}

			.items {
				display: flex;

				.item-name {
					color: #333333;
				}

				.item-phone {
					color: #333333;
					margin: 4rpx 0 24rpx 0;
				}

				.item-code {
					font-size: 24rpx;
					color: rgba(102, 102, 102, 1);
				}

				.item-operation {
					// margin: 4rpx 0 24rpx 0;
					margin-bottom: 20rpx;
					color: rgba(189, 26, 45, 1);
				}

				.text-end {
					text-align: end;
				}

				.item-status {
					padding: 4rpx 8rpx;
					font-size: 10px;
					background: rgb(230, 250, 185);
					color: rgba(91, 133, 0, 1);
					;
				}

				.item-retain {
					padding: 4rpx 8rpx;
					font-size: 10px;
					background: rgb(189, 26, 45);
					color: rgba(255, 255, 255, 1);
				}

				.transferout {
					position: relative;
					.transferout-status {
						padding: 4rpx 8rpx;
						font-size: 10px;
						color: rgba(189, 26, 45, 1);
						border-radius: 2px;
						border: 1px solid rgb(189, 26, 45);
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
			}
		}
	}
</style>